<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #circle{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            border-radius: 50%;
            margin-left: 81px;
        }
    </style>
</head>
<body>
        <div id="circle"></div>
        <div>
            <input type="button" name="box" value="移动">
        </div>
        <script>
        var s = document.getElementById('circle');            //找到 html 中要移动的小球的对象
        var cssobj = window.getComputedStyle(s);               //根据 html找到 css 的对象

        console.log(cssobj);                                    //打印 css 被赋值的元素
        console.log(cssobj.marginLeft);                        //打印 css 中的想要移动的元素margin-left

        function move() {                                        //自定义一个函数
            s.style.marginLeft = parseInt(cssobj.marginLeft) + 1 + 'px';     //s = 这个球，这个球样式的移动 = css 样式中的移动每次+ 1px
        }                        //parseInt 将字符串转换成整数

        setInterval(move,20) ;                             //函数，设置的时间间隔,让函数重复执行，每隔20毫秒重复一次


        </script>

</body>
</html>